<template>
	<div class="login-container">
		<el-form autoComplete="off"  auto-complete="off" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
			class="card-box login-form">
			<h3 class="title">登入鑫E贷商户端</h3>
			<el-form-item prop="username">
				<span class="svg-container svg-container_login">
					<svg-icon icon-class="user" />
				</span>
				<el-input name="username" type="text" v-model="loginForm.username" autoComplete="off"  auto-complete="off" placeholder="机构账号" />
			</el-form-item>
			<el-form-item prop="password">
				<span class="svg-container">
					<svg-icon icon-class="password"></svg-icon>
				</span>
				<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off" auto-complete="off"
					placeholder="登录密码"></el-input>
					<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
					登录
				</el-button>
			</el-form-item>
			<div class="tips">
				<span style="margin-right:20px;">如果有账号问题，请联系客服咨询</span>
				<span class="phone"> 400-000-000</span>
			</div>
		</el-form>
		<div id="large-header" class="large-header">
				<canvas id="demo-canvas"></canvas>
		</div>
	</div>
</template>

<script>
import "@/styles/demo.css";
import "@/styles/component.css";
import { isvalidUsername } from '@/utils/validate'
function rAF() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
		window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
				|| window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
		window.requestAnimationFrame = function(callback, element) {
				var currTime = new Date().getTime();
				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
				var id = window.setTimeout(function() { callback(currTime + timeToCall); },
						timeToCall);
				lastTime = currTime + timeToCall;
				return id;
		};

if (!window.cancelAnimationFrame)
		window.cancelAnimationFrame = function(id) {
				clearTimeout(id);
		};
}

function demo1() {

	var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

	// Main
	initHeader();
	initAnimation();
	addListeners();

	function initHeader() {
		width = window.innerWidth;
		height = window.innerHeight;
		target = {x: width/2, y: height/2};

		largeHeader = document.getElementById('large-header');
		largeHeader.style.height = height+'px';

		canvas = document.getElementById('demo-canvas');
		canvas.width = width;
		canvas.height = height;
		ctx = canvas.getContext('2d');

		// create points
		points = [];
		for(var x = 0; x < width; x = x + width/20) {
				for(var y = 0; y < height; y = y + height/20) {
						var px = x + Math.random()*width/20;
						var py = y + Math.random()*height/20;
						var p = {x: px, originX: px, y: py, originY: py };
						points.push(p);
				}
		}

		// for each point find the 5 closest points
		for(var i = 0; i < points.length; i++) {
			var closest = [];
			var p1 = points[i];
			for(var j = 0; j < points.length; j++) {
					var p2 = points[j]
					if(!(p1 == p2)) {
							var placed = false;
							for(var k = 0; k < 5; k++) {
									if(!placed) {
											if(closest[k] == undefined) {
													closest[k] = p2;
													placed = true;
											}
									}
							}

							for(var k = 0; k < 5; k++) {
									if(!placed) {
											if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
													closest[k] = p2;
													placed = true;
											}
									}
							}
					}
			}
			p1.closest = closest;
		}

		// assign a circle to each point
		for(var i in points) {
				var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
				points[i].circle = c;
				}
		}

		// Event handling
		function addListeners() {
				if(!('ontouchstart' in window)) {
						window.addEventListener('mousemove', mouseMove);
				}
				window.addEventListener('scroll', scrollCheck);
				window.addEventListener('resize', resize);
		}

		function mouseMove(e) {
				var posx  = 0,
				posy = 0;
				if (e.pageX || e.pageY) {
						posx = e.pageX;
						posy = e.pageY;
				}
				else if (e.clientX || e.clientY)    {
						posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
						posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
				}
				target.x = posx;
				target.y = posy;
		}

		function scrollCheck() {
				if(document.body.scrollTop > height) animateHeader = false;
				else animateHeader = true;
		}

		function resize() {
				width = window.innerWidth;
				height = window.innerHeight;
				largeHeader.style.height = height+'px';
				canvas.width = width;
				canvas.height = height;
		}

		// animation
		function initAnimation() {
				animate();
				for(var i in points) {
						shiftPoint(points[i]);
				}
		}

		function animate() {
				if(animateHeader) {
						ctx.clearRect(0,0,width,height);
						for(var i in points) {
								// detect points in range
								if(Math.abs(getDistance(target, points[i])) < 4000) {
										points[i].active = 0.3;
										points[i].circle.active = 0.6;
								} else if(Math.abs(getDistance(target, points[i])) < 20000) {
										points[i].active = 0.1;
										points[i].circle.active = 0.3;
								} else if(Math.abs(getDistance(target, points[i])) < 40000) {
										points[i].active = 0.02;
										points[i].circle.active = 0.1;
								} else {
										points[i].active = 0;
										points[i].circle.active = 0;
								}

								drawLines(points[i]);
								points[i].circle.draw();
						}
				}
				requestAnimationFrame(animate);
		}

		function shiftPoint(p) {
				TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
						y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
						onComplete: function() {
								shiftPoint(p);
						}});
		}

		// Canvas manipulation
		function drawLines(p) {
				if(!p.active) return;
				for(var i in p.closest) {
						ctx.beginPath();
						ctx.moveTo(p.x, p.y);
						ctx.lineTo(p.closest[i].x, p.closest[i].y);
						ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
						ctx.stroke();
				}
		}

		function Circle(pos,rad,color) {
				var _this = this;

				// constructor
				(function() {
						_this.pos = pos || null;
						_this.radius = rad || null;
						_this.color = color || null;
				})();

				this.draw = function() {
						if(!_this.active) return;
						ctx.beginPath();
						ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
						ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
						ctx.fill();
				};
		}

		// Util
		function getDistance(p1, p2) {
				return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
		}
		
}
export default {
	name: 'login',
	data() {
		const validateUsername = (rule, value, callback) => {
			if (!isvalidUsername(value)) {
				callback(new Error('请输入正确的用户名'))
			} else {
				callback()
			}
		}
		const validatePass = (rule, value, callback) => {
			if (value.length < 5) {
				callback(new Error('密码不能小于5位'))
			} else {
				callback()
			}
		}
		return {
			loginForm: {
				username: '',
				password: ''
			},
			loginRules: {
				username: [{ required: true, trigger: 'blur', validator: validateUsername }],
				password: [{ required: true, trigger: 'blur', validator: validatePass }]
			},
			loading: false,
			pwdType: 'password'
		}
	},
	methods: {
		showPwd() {
			if (this.pwdType === 'password') {
				this.pwdType = ''
			} else {
				this.pwdType = 'password'
			}
		},
		handleLogin() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.loading = true
					this.$store.dispatch('Login', this.loginForm).then(() => {
						this.loading = false
						this.$router.push({ path: '/' })
					}).catch(() => {
						this.loading = false
					})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		}
	},
	mounted(){
		rAF()
		demo1()
	}
}
</script>

<style rel="stylesheet/scss" lang="scss">

	$bg:#2d3a4b;
	$dark_gray:#889aa4;
	$light_gray:#151313;

	.login-container {
		position: fixed;
		height: 100%;
		width:100%;
		background-color: $bg;
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
			-webkit-text-fill-color: #fff !important;
		}
		input {
			background: transparent;
			border: 0px;
			-webkit-appearance: none;
			border-radius: 0px;
			padding: 12px 5px 12px 15px;
			color: $light_gray;
			height: 47px;
		}
		.el-input {
			display: inline-block;
			height: 47px;
			width: 85%;
		}
		.tips {
			font-size: 14px;
			color: #999;
			margin-bottom: 10px;
			.phone{
				color:#ff4800
			}
		}
		.svg-container {
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
			&_login {
				font-size: 20px;
			}
		}
		.title {
			font-size: 26px;
			font-weight: 400;
			color: $light_gray;
			margin: 0px auto 40px auto;
			text-align: center;
			font-weight: bold;
		}
		.login-form {
			background-color:#fff;
			position: absolute;
			right: 0;
			width: 400px;
			padding: 35px 35px 15px 35px;
			margin-top: 10%;
			margin-right:15%;
			z-index: 9;
		}
		.el-form-item {
			border: 1px solid rgba(97, 95, 95, 0.43);
			background: rgba(0, 0, 0, 0);
			border-radius: 5px;
			color: #454545;
		}
		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select:none;
		}
		.thirdparty-button{
			position: absolute;
			right: 35px;
			bottom: 28px;
		}
	}
</style>
